<template>
  <div>
    <el-descriptions :title="'欢迎您!' + user.name" :column="2" size="40" border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-s-custom"></i>
          账号
        </template>
        {{ user.no }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          电话
        </template>
        {{ user.phone }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          性别
        </template>
        <el-tag
            :type="user.sex === '1' ? 'primary' : 'danger'"
            disable-transitions
        >
          <i
              :class="user.sex === '1' ? 'wl-icon-male' : 'wl-icon-female'"
          ></i>
          {{ user.sex === '1' ? "男" : "女" }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-s-custom"></i>
          角色
        </template>
        <el-tag type="success" disable-transitions>
          {{
            user.roleId === 0
                ? "超级管理员"
                : user.roleId === 1
                ? "管理员"
                : "用户"
          }}
        </el-tag>
      </el-descriptions-item>
    </el-descriptions>
    <DateUtils></DateUtils>
  </div>
</template>

<script>
import DateUtils from "./DateUtils";

export default {
  name: "AppHome",
  components: {
    DateUtils,
  },
  data() {
    return {
      user: {}, // 用于存储用户信息
    };
  },
  methods: {
    init() {
      // 从 sessionStorage 中获取当前用户信息
      const userData = sessionStorage.getItem("CurUser");
      if (userData) {
        this.user = JSON.parse(userData);
      } else {
        console.warn("用户信息未找到，请检查是否已登录。");
        this.user = {}; // 若未找到数据，则初始化为空对象
      }
    },
  },
  mounted() {
    this.init(); // 组件挂载时初始化用户信息
  },
};
</script>

<style scoped>
/* 性别图标样式 */
.wl-icon-male {
  color: #409eff;
}

.wl-icon-female {
  color: #f56c6c;
}
</style>
